<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{$room->room_name}}</title>
	<link rel="stylesheet" href="/static/css/chat.css">

	<link rel='stylesheet' href='\static\css\jquery.mCustomScrollbar.min.css'>
	<script src="\static\js\jquery2.1.3.min.js"></script>
	<script src='\static\js\jquery.mCustomScrollbar.concat.min.js'></script>
	<!--样式来源 https://codepen.io/supah/pen/jqOBqp -->
</head>

<body>
	<div class="chat">
		<div class="chat-title">
			<h1>{{$object->nickname}}</h1>
			<h2>{{$object->account}}</h2>
			<figure class="avatar">
				<img src="{{$object->avatar}}" />
			</figure>
		</div>
		<div class="messages">
			<div class="messages-content">

				@foreach($chatList as $v)
				@if($v->from_id==$object->id)
				<div class="message new">
					<figure class="avatar"><img src="{{$object->avatar}}"></figure>{{$v->content}}
					<!-- <div class="timestamp">20:9</div> -->
				</div>
				@else
				<div class="message message-personal new">{{$v->content}}</div>
				@endif
				@endforeach
			</div>
		</div>
		<div class="message-box">
			<textarea id="ta" type="text" class="message-input" placeholder="Type message..."></textarea>
			<button type="submit" class="message-submit">Send</button>
		</div>

	</div>
	<div class="bg"></div>
</body>
<!-- <script src="/static/js/chat.js"></script> -->
<script>
	var $messages = $('.messages-content'),
    d, h, m,
    i = 0;

	$(window).load(function() {
		$messages.mCustomScrollbar();
	});
	function updateScrollbar() {
		$messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
		scrollInertia: 10,
		timeout: 0
	});
	}
	function insertMessage() {
		msg = $('.message-input').val();
		if ($.trim(msg) == '') {
			return false;
		}
		$('<div class="message message-personal">' + msg + '</div>').appendTo($('.mCSB_container')).addClass('new');
		// setDate();
		$('.message-input').val(null);
		updateScrollbar();
	}

	// $('.message-submit').click(function() {
	// 	insertMessage();
	// });

	if(window.WebSocket){
          // 端口和ip地址对应不要写错
			//   var webSocket = new WebSocket("ws://127.0.0.1:9502");
			var webSocket = new WebSocket("ws://101.43.207.21:9502/");
			webSocket.onopen = function (event) {
				console.log('webSocket 链接成功');
			};
			
			//收到服务端消息回调
			webSocket.onmessage = function (event) {
				console.log(event.data);
				var jsonObject=$.parseJSON(event.data);
				console.log(jsonObject.msg);
				if(jsonObject.to == "{{$userinfo->id}}" && jsonObject.from=="{{$object->id}}"){
					$('<div class="message"><figure class="avatar"><img src="{{$object->avatar}}" /></figure><span>'+jsonObject.msg+'</span></div>').appendTo($('.mCSB_container')).addClass('new');
				}
				// $('<div class="message loading new"><figure class="avatar"><img src="" /></figure><span></span></div>').appendTo($('.mCSB_container'));
				updateScrollbar();
			}
			
			$('.message-submit').click(function() {
				data={
					msg: $('.message-input').val(),
					to: "{{$object->id}}",
					from: "{{$userinfo->id}}",
					room_id: "{{$room->id}}"
				};
				data=JSON.stringify(data);
				insertMessage();
				webSocket.send(data);
			});
			$('#ta').bind('keyup',function(e) {
        if(e.keyCode=='13'){
          $('.message-submit').click()
        }
			});
		}else{
			console.log("您的浏览器不支持WebSocket");
		}
</script>
</html>